<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>搜索好友</title>
		<link rel="stylesheet" type="text/css" href="css/style_friend.css" />
		<SCRIPT language="javascript" src="js/jquery-3.1.1.js" type="text/javascript"></SCRIPT>
	</head>

	<body>
		<!--header===================================-->
		<header>
			<h1><a href="#"><img src="img/Backicon.png"></a></h1>

			<div class="header_middle">好友列表</div>
			<div class="header_right"></div>
		</header>

		<!--表单form部分===================================================-->
		<section id="form">
			<form action="#" method="post">
				<div class="input-group">
					<input type="text" value="" name="keyword" required placeholder="&nbsp;&nbsp;&nbsp;&nbsp;搜索" />
				</div>
			</form>
		</section>

		<!--main=======================================-->
		<section id="main">
			<div class="line"></div>

			<div>A</div>

			<figure>
				<a href="#" target="_blank">
					<img src="img/head02.png" />
				</a>
				<figcaption>
					<span>B肥嘟嘟</span>
				</figcaption>
			</figure>

			<figure>
				<a href="#" target="_blank">
					<img src="img/head03.png" />
				</a>
				<figcaption>
					<span>酷毙天际</span>
				</figcaption>
			</figure>

			<div>B</div>

			<figure>
				<a href="#" target="_blank">
					<img src="img/head02.png" />
				</a>
				<figcaption>
					<span>B肥嘟嘟</span>
				</figcaption>
			</figure>

			<figure>
				<a href="#" target="_blank">
					<img src="img/head03.png" />
				</a>
				<figcaption>
					<span>酷毙天际</span>
				</figcaption>
			</figure>

			<div>C</div>

			<figure>
				<a href="#" target="_blank">
					<img src="img/head02.png" />
				</a>
				<figcaption>
					<span>B肥嘟嘟</span>
				</figcaption>
			</figure>

			<figure>
				<a href="#" target="_blank">
					<img src="img/head03.png" />
				</a>
				<figcaption>
					<span>酷毙天际</span>
				</figcaption>
			</figure>

			<div class="space"></div>
		</section>

		<!--右侧字母序列导航-->
		<aside>
			<a href="#">A</a>
			<a href="#">B</a>
			<a href="#">C</a>
			<a href="#">D</a>
			<a href="#">E</a>
			<a href="#">F</a>
			<a href="#">G</a>
			<a href="#">H</a>
			<a href="#">I</a>
			<a href="#">J</a>
			<a href="#">K</a>
			<a href="#">L</a>
			<a href="#">M</a>
			<a href="#">N</a>
			<a href="#">O</a>
			<a href="#">P</a>
			<a href="#">Q</a>
			<a href="#">R</a>
			<a href="#">S</a>
			<a href="#">T</a>
			<a href="#">U</a>
			<a href="#">V</a>
			<a href="#">W</a>
			<a href="#">X</a>
			<a href="#">Y</a>
			<a href="#">Z</a>
		</aside>

		<!--footer部分-->
		<footer id="commonfooter">
			<div>
				<a href="#"></a>
				<span>聊天</span>
			</div>
			<div>
				<a href="#"></a>
				<span>联系人</span>
			</div>
			<div>
				<a href="#"></a>
				<span>发帖</span>
			</div>
			<div>
				<a href="#"></a>
				<span>我</span>
			</div>
		</footer>

	</body>

</html>